<template>
  <div id="cont">
      <header>
        <div class="header_content" :class="{search:ifSearch}">
          <a href="/" class="logo"></a>
          <div class="action">
            <div class="searchBox" v-if="ifSearch">
              <span class="searchIcon"></span>
              <input type="search" v-model="keyword" @input="searchKeys" @click="searchKeys">
              <router-link to="/"><span class="cancle" @click="showSearch(false)">取消</span></router-link>
            </div>
            <router-link to="/search"><i class="searchi"></i></router-link>
            <a @click="troggle" href="javascript:void(0);"><i class="menu"></i></a>
            <div class="suggestKeyword" v-show="ifShowKeywordsList()">
                <div class="title" @click="goSearch(keyword)">
                    搜索 “
                    <span class="keyword">{{keyword}}</span>
                    ”
                </div>
                <div class="keywordsList">
                    <div class="item"
                        v-for="item in keywordsList"
                        :key="getKey(item)"
                    >
                        <i></i>
                        <div class="itemContent" @click="goSearch(item)">
                            <span class="keyword">{{keyword}}</span>
                            {{item}}
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </div>
        <transition enter-active-class="animated slideInRight" leave-active-class="animated slideOutRight">
          <Mine v-show="ifShow"></Mine>
        </transition>
      </header>
      <main>
        <div>
          <router-view :scroll="bScroll"
          :key="refreshKey"
          :pos="pos"
          @showSearch="showSearch"
          @changeKeywords="changeKeywords"
           >
            <footer>
              <div class="f_top">
                <button>客户端</button>
                <i class="logo_cat"></i>
                <button @click="goTop">返回顶部</button>
              </div>
              <div class="f_bottom">MissEvan弹幕音频网 京ICP备:14055174号-1</div>
            </footer>
          </router-view>
        </div>
      </main>
  </div>
</template>

<script>
import { get } from "util/http"
import BScroll from "better-scroll"
import Mine from "components/home/Mine"
import bus from "assets/playerBus"
export default {
  data(){
    return {
      bScroll:null,
      ifShow:false,
      ifSearch:this.$route.path.indexOf("search")!==-1?true:false,
      refreshKey:"",
      pos:{
        x:0,
        y:0
      },
      keyword:this.$route.params.keyword?this.$route.params.keyword:"",
      keywordsList:[]
    }
  },
  methods:{
    troggle(){
      this.ifShow=!this.ifShow
    },
    goTop(){
      this.bScroll.scrollTo(0,0)
    },
    showSearch(bol){
      this.ifSearch=bol
      this.keyword=""
    },
    async searchKeys(){
        let result =await get({
            url:"/ajax/sound/suggest",
            params:{
                s:this.keyword
            }
        })
        if(result.info instanceof Array){
          this.keywordsList=result.info
        }else{
          this.keywordsList=[]
        }
    },
    goSearch(keyword){
        this.keyword=keyword
        this.$router.push({
            name:"searchList",
            params:{
                keyword
            }
        })
    },
    changeKeywords(obj){
      this.keyword=obj.keyword
    },
    ifShowKeywordsList(){
      if(this.$route.params.keyword&&this.$route.params.keyword===this.keyword){
        return false
      }else if(this.ifSearch&&this.keyword!==""){
        return true
      }
    },
    getKey(key){
        return key+new Date().getTime()+Math.random()
    }
  },
  async mounted(){
    bus.$on("goDetail",()=>{
      this.showSearch(false)
    })
    await this.$nextTick()
    this.bScroll=new BScroll('main',{
      click:true,
      bounce:false,
      //momentum:false,
      probeType:3,
      deceleration:0.0030,
      swipeTime:1000
    })
    this.bScroll.on('scroll',(pos)=>{
            this.pos=pos
    })
  },
  components:{
    Mine
  },
  watch:{
    "$route.params.soundid"(){
      this.refreshKey=new Date().getTime()
    },
    "$route.params.keyword"(){
      this.refreshKey=new Date().getTime()
    }
  }
}
</script>

<style lang="stylus" scoped>
#cont
  width 100%
  height 100%
  display flex
  flex-direction column
  background #f5f5f5
  button
    background transparent
    color #9e9e9e
    border none
    width .6rem
    font-family inherit
  header 
    width 100%
    height .4rem
    background #000
    z-index 999
    position fixed
    .header_content
      padding .1rem
      line-height .2rem
      height .4rem
      display flex
      align-items center
      justify-content space-between
      .logo
        display block
        height .2rem
        width 1.02rem
        background-image url('')
        margin 0
        background-size 100%
        background-repeat no-repeat
      .action
        display flex
        justify-content flex-end
        align-items center
        .searchi
          background-image url('https://static.missevan.com/assets/m/images/build/sprite-icons@2x.bfd3fcc1.png')
          background-position -2.23rem -.22rem;
          background-size 2.62rem 2.34rem
          width .22rem
          height .2rem
          margin 0 .2rem
        .menu
          background-image url('https://static.missevan.com/assets/m/images/build/sprite-icons@2x.bfd3fcc1.png')
          background-position -2.23rem 0;
          background-size 2.62rem 2.34rem
          width .22rem
          height .2rem
    .search
      .logo
        display none 
      .searchi
        display none
      .action
        width 100%
        display flex
        justify-content center
        align-items center
        .suggestKeyword
          position absolute
          top .4rem
          width 100%
          height calc(100vh - 0.4rem)
          padding-left .1rem
          background-color #f5f5f5
          font-size .14rem
          .title
              height .4rem
              border-bottom 1px solid #e0e0e0
              line-height .4rem
              .keyword
                  color #e63c3c
          .keywordsList
              .item
                  display block
                  width 100%
                  height .4rem
                  line-height .4rem
                  display flex
                  align-items center
                  >i 
                      width .13rem
                      height .13rem
                      background-image url('https://static.missevan.com/assets/m/images/build/sprite-icons@2x.1592535d.png')
                      background-position -2.47rem -1.03rem
                      background-size 2.62rem 2.34rem
                      margin-right .1rem
                  .itemContent
                      width calc(100% - 0.3rem)
                      height .4rem
                      white-space nowrap
                      text-overflow ellipsis 
                      overflow hidden
                      color #3d3d3d
                      .keyword
                          color #e63c3c
        .searchBox
          display flex
          width 100%
          .searchIcon
            position absolute
            display block
            top .13rem
            left .17rem
            width .14rem
            height .14rem
            background-image url('https://static.missevan.com/assets/m/images/build/sprite-icons@2x.1592535d.png')
            background-position -2.47rem -0.87rem
            background-size 2.62rem 2.34rem
            opacity 0.3
          input 
            padding 0.06rem 0.1rem
            padding-left .3rem
            flex 1
            white-space nowrap
            text-overflow ellipsis 
            overflow hidden
            color #000
            height .3rem
            border-radius 0.02rem
            border none
            background-color #fff
            font-size .13rem
          .cancle
            color #ffffff
            font-size .14rem
            line-height .3rem
            margin 0 .15rem
  main
    height 100%
    >div
      padding-top .4rem
      position relative
      min-height calc(100% - 0.2rem)
      display flex
      flex-direction column
  footer 
    height .7rem
    width 100%
    display flex
    flex-direction  column
    justify-content space-around
    padding .1rem .2rem
    color #9e9e9e
    font-size .14rem
    .f_top
      width 100%
      display flex
      justify-content space-around
      align-items center
      .logo_cat
        background-image url('https://static.missevan.com/assets/m/images/build/sprite-icons@2x.bfd3fcc1.png')
        width .14rem
        height .16rem
        background-position -2.47rem -.51rem
        background-size 2.62rem 2.34rem
    .f_bottom
      width 100%
      text-align center
      font-size .12rem


</style>